<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/qietu.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="container" id="app">
    <div class="leftside">
        <div class="logo">
            <a href="#">
                <img th:src="@{/images/logo.png}">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li class="active"><a href="#">首 页</a></li>
                <li><a th:href="@{/stu/add}">学 生 添 加</a></li>
                <li><a th:href="@{/stu/addtea}">老 师 添 加</a></li>
            </ul>
        </div>
    </div>
    <div class=" hmainpage">
        <div class="header">
            <div class="quan">
                <h4>泉州市XXX大学20级总人数<br/>
                    实时统计数</h4>
                <h2>[[${sum}+${teasum}]]</h2>
                <ul>
                    <li><label>专业数</label>[[${size}]]</li>
                    <li><label>学生总人数</label>[[${sum}]]</li>
                    <li><label>教师总人数</label>[[${teasum}]]</li>
                </ul>
            </div>
        </div>
        <div class="search">
            <form>
                <input type="text" class="txt" name="" id="" value=""
                       placeholder="请输入统一代码/代码号/注册号/机构名称/法定代表人身份证号码等关键词"/>
                <input type="submit" class="btn" name="" id="" value="查询"/>
            </form>
        </div>
        <div class="chart">
            <div class="chart-l">
                <div class="head">
                    <h2>上月新增机构分布</h2>
                </div>
                <div class="body">
                    <div id="pie1" style="width:350px;height:280px; margin: 0 auto;"></div>
                    <img th:src="@{/images/bg.jpg}">
                </div>
            </div>
            <div class="chart-r">
                <div class="head">
                    <h2>截止上月末存量企业银行开户比例</h2>
                </div>
                <div class="body">
                    <div id="pie2" style="width:350px;height:280px; margin: 0 auto;"></div>
                    <img th:src="@{/images/bg.jpg}">
                </div>
            </div>
        </div>

        <div class="footer">
            <p>版权所有：厦门市标准化研究院 XiaMen Institute of Standardization &nbsp;闽ICP备09004615号闽公网安备 35020302033918号 <br/>
                地址：厦门市思明区湖滨南路170号大楼八楼西侧 &nbsp; 邮编：361004 &nbsp; 邮箱：byy@xmzjj.gov.cn </p>
        </div>
    </div>
    <div class="hrightside">
        <div class="type">
            <div class="head">
                <h2>学生人数</h2>
            </div>
            <table class="layui-table">
                <thead>
                <th>专业ID &nbsp &nbsp &nbsp &nbsp &nbsp</th>
                <th>专业名 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                </th>
                <th>单位：人</th>
                </thead>
                <tbody>
                <!--/*@thymesVar id="Stulist" type=""*/-->
                <tr th:each="stu :${stulist}">
                    <td>[[${stu.id}]]</td>
                    <td th:text="${stu.zyname}"></td>
                    <td>[[${stu.stunum}]]</td>
                    <td>
                        <a th:href="'/stu/edit/'+${stu.id}">编辑 &nbsp &nbsp &nbsp</a>
                        <a th:href="'/stu/delete/'+${stu.id}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="head">
                <h2>教师人数</h2>
            </div>
            <table class="layui-table">
                <thead>
                <th>专业ID &nbsp &nbsp &nbsp &nbsp &nbsp</th>
                <th>专业名 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                </th>
                <th>单位：人</th>
                </thead>
                <tbody>
                <tr th:each="tea :${tealist}">
                    <td>[[${tea.id}]]</td>
                    <td th:text="${tea.teaname}"></td>
                    <td>[[${tea.teanum}]]</td>
                    <td>
                        <a th:href="'/stu/edittea/'+${tea.id}">编辑 &nbsp &nbsp &nbsp</a>
                        <a th:href="'/stu/deletetea/'+${tea.id}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/echarts.min.js}" type="text/javascript" charset="utf-8"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                txt: '123',
            }
        },
        computed: {},
        methods: {},
        mounted: function () {
            var myChart1 = echarts.init(document.getElementById('pie2'));
            var option1 = {
                title: {
                    show: false,
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    left: 'left',
                    data: ['个体工商户', '非商事主体', '企业']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['55%', '70%'],
                        //radius : '55%',
                        //center: ['50%', '60%'],

                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 0,
                                lineStyle: {
                                    color: '#fff'
                                }
                            }

                        },
                        label: {
                            normal: {
                                formatter: "{b} {d}%",

                                textStyle: {
                                    //fontFamily : "微软雅黑",
                                    fontSize: 14,
                                    color: '#fff'

                                }
                            }
                        },
                        data: [
                            {value: 55, name: '开户'},
                            {value: 45, name: '未开户'}
                        ],
                        color: ['#09faf1', '#3c7bfe'],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },

                        }
                    }
                ]
            };


            // 为echarts对象加载数据
            myChart1.setOption(option1);


            var myChart2 = echarts.init(document.getElementById('pie1'));
            var option2 = {

                title: {
                    show: false,
                    text: '',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    left: 'left',
                    data: ['社团', '民非', '工会', '其他机构', '事业单位', '机关', '企业', '个体户']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        //radius : '55%',
                        //center: ['50%', '60%'],
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 0,
                                lineStyle: {
                                    color: '#fff'
                                }
                            }

                        },
                        label: {
                            normal: {
                                formatter: '{b}',


                                textStyle: {
                                    //fontFamily : "微软雅黑",
                                    fontSize: 14,
                                    color: '#fff',
                                    lineHeight: 40

                                }
                            }
                        },
                        data: [
                            {value: 30, name: '工会法人'},
                            {value: 20, name: '机关'},
                            {value: 10, name: '社团'},
                            {value: 10, name: '事业单位'},
                            {value: 10, name: '民办非企业'},
                            {value: 60, name: '其他机构'}
                        ],
                        color: ['#e0a10f', '#31dfb1', '#e25e4a', '#1890d2', '#a13fd1', '#c02c94', '#2e8dca', '#4851d1'],
                        itemStyle: {
//              emphasis: {
//                  shadowBlur: 10,
//                  shadowOffsetX: 0,
//                  shadowColor: 'rgba(0, 0, 0, 0.5)'
//              },

                        }
                    }
                ]
            };


            // 为echarts对象加载数据
            myChart2.setOption(option2);

        },
        created: function () {

        }
    })
</script>

</body>
</html>
